<template>
   <div>
    <div class=""header>
        <el-form :modle="searchForm" inline>
            <el-form-item lable="用户名称">
                <el-input placeholder="请输入用户名称进行查询" v-model="searchForm.account"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button  @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button  @click="showAddAcount">新增</el-button>
    </div>
    
    <el-table :data="tableData" style="width:100% ">
    <el-table-column prop="account" label="用户名"/>
    <el-table-column prop="level" label="等级"/>
    <el-table-column label="操作">
        <template #default="{row}">
            <el-button size="smalll" @click="updateAccount(row)">编辑</el-button>
            <el-button size="smalll" type="danger" @click="deleteAccount">删除</el-button>
        </template>
    </el-table-column>
    </el-table>

    <!-- 新增/修改弹框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">
    <el-form :model="accountForm" label-width="120px">
        <el-form-item lable="用户名称">
                <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
            </el-form-item>
            <el-form-item lable="等级">
                <el-input placeholder="请输入用户等级" v-model.number="accountForm.level"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
            <el-button  @click="resetAccountDialog">取消</el-button>
            <!-- 添加 -->
            <el-button  type="primary" @click="addAccount" v-if="dialogType ==dialogTypeMap.add">确认</el-button>

            <!-- 修改 -->
            <el-button  type="primary" @click="updateAccountHandle" v-else>确认</el-button>
        </span>
        </template>
    </el-dialog>
</div>
</template>

<script setup>
import{ref,computed,getCurrentInstance}from 'vue';
import { getDataApi,addAccountApi,deleteAccountApi,updateAccountApi } from '../utils/mockServer/db'

//常量定义
const DEFAULTLEVEL=1
const DIALOGTITLEMAP={
    0:'新增',
    1:'修改'
}
const {proxy:_this} = getCurrentInstance()

//列表数据
const tableData =ref([])
//搜索表单
const searchForm =ref({
    account:''
})
//新增/修改时的表单
const accountForm =ref({
    account:'',
    level:DEFAULTLEVEL,
    id:0
})
//新增/修改弹框
const dialogVisible =ref(false)
//弹框类型Map
const dialogTypeMap =ref({
    add:0,
    modify:1
})
//弹框类型Map
const dialogType =ref(dialogTypeMap.value.add)
//弹框标语
const dialogTitle =computed(()=>{
    return DIALOGTITLEMAP[dialogType]
})

//请求全部数据
const getData =()
//搜索操作
//显示弹框，并切换弹框类型为新增
//获得弹框中的数据
//调用接口






</script>

